<template>
  <div class="couponList">
    <van-nav-bar title="我的优惠券"
                 :fixed=true
                 :border=false
                 @click-left="handleToBack"
                 left-arrow
                 style="height:44px"
                 />
    <van-coupon-list
      :coupons="coupons"
      style="margin-top:52px"
      :chosen-coupon="chosenCoupon"
      input-placeholder="请输入520it兑换"
      :disabled-coupons="disabledCoupons"
      @change="onChange"
      @exchange="onExchange" />
  </div>
</template>

<script>
export default {
  name: 'CouponList',
  data () {
    return {
      chosenCoupon: -1,
      disabledCoupons: [],
      coupons: [{                  // 优惠券信息
        available: 1,
        condition: '无使用门槛\n最多优惠1.5元',
        reason: '',
        value: 150,
        name: '优惠券',
        startAt: 1549104000,
        endAt: 1614592000,
        valueDesc: '1.5',
        unitDesc: '元'
      }, {                  // 优惠券信息
        available: 1,
        condition: '无使用门槛\n最多优惠1.5元',
        reason: '',
        value: 200,
        name: '优惠券',
        startAt: 1549104000,
        endAt: 1614592000,
        valueDesc: '1.5',
        unitDesc: '元'
      }]
    }
  },
  components: {},

  methods: {
    handleToBack () {
      this.$router.back()
    },
    onExchange (code) {
      if (code === '520it') {
       this.coupons.push(this.coupons[0])
       }
    },
    onChange(index) {
      this.chosenCoupon = index
    }

  }
}

</script>
<style lang='scss' scoped>
.couponList {
  @include setAllcover(999);;
  background-color: $bg-color-page;
  .van-nav-bar__title {
    color: $text-color-black;
  }
  .van-icon {
    color: #dedede;
  }
}
</style>
